<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
        <script
            src="https://unpkg.com/react@18/umd/react.development.js"
            crossorigin
        ></script>
        <script
            src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
            crossorigin
        ></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

        <script type="text/babel">
            class InputElement extends React.Component {
                constructor(props) {
                    super(props);
                }
                render() {
                    return (
                        <div>
                            <label>{this.props.children}</label>
                            <input
                                type={this.props.type}
                                value={this.props.value}
                                onChange={this.props.onChange}
                                onBlur={this.props.validate}
                            />
                            <span>{this.props.info}</span>
                        </div>
                    );
                }
            }
            class Reg extends React.Component {
                state = {
                    username: {
                        info: "",
                        value: "",
                    },
                    pwd: {
                        info: "",
                        value:""
                    },
                    confirm: {
                        info: "",
                        value:""
                    },
                };
                constructor(props) {
                    super(props);
                    this.handleSubmit = this.handleSubmit.bind(this);
                }
                validateUsername = (e) => {
                    if (/^\w{6,20}$/.test(e.target.value)) {
                        this.setState({
                            username: {
                                ...this.state.username,
                                info: "√",
                            },
                        });
                    } else {
                        this.setState({
                            username: {
                                ...this.state.username,
                                info: "X",
                            },
                        });
                    }
                };
                validatePwd = (e) => {
                    if (/^.{6,}$/.test(e.target.value)) {
                        this.setState({
                            pwd: {
                                ...this.state.pwd,
                                info: "√",
                            },
                        });
                    } else {
                        this.setState({
                            pwd: {
                                ...this.state.pwd,
                                info: "X",
                            },
                        });
                    }
                };
                validateConfirm = (e) => {
                    if (e.target.value == this.state.pwd.value) {
                        this.setState({
                            confirm: {
                                ...this.state.confirm,
                                info: "√",
                            },
                        });
                    } else {
                        this.setState({
                            confirm: {
                                ...this.state.confirm,
                                info: "密码不一致",
                            },
                        });
                    }
                };
                handleSubmit(){
                    if(this.state.username.info == "√"
                        && this.state.pwd.info == "√"
                        && this.state.confirm.info == "√"){

                        console.log(this.state.username.value,this.state.pwd.value);
                        alert("注册成功");
                    }else{
                        alert("验证失败");
                    }
                }
                render() {
                    return (
                        <form action="#">
                            <h1>注册</h1>
                            <InputElement
                                type="text"
                                info={this.state.username.info}
                                value={this.state.username.value}
                                validate={this.validateUsername}
                                onChange={(e) =>
                                    this.setState({
                                        username: { value: e.target.value },
                                    })
                                }
                            >
                                用户名：
                            </InputElement>
                            <InputElement type="password"
                                info={this.state.pwd.info}
                                value={this.state.pwd.value}
                                validate={this.validatePwd}
                                onChange={(e) =>
                                    this.setState({
                                        pwd: { value: e.target.value },
                                    })
                                }
                            >密码：</InputElement>
                            <InputElement type="password"
                                info={this.state.confirm.info}
                                value={this.state.confirm.value}
                                validate={this.validateConfirm}
                                onChange={(e) =>
                                    this.setState({
                                        confirm: { value: e.target.value },
                                    })
                                }
                            >
                                确认密码：
                            </InputElement>
                            <button type="button" onClick={this.handleSubmit}>提交</button>
                        </form>
                    );
                }
            }

            const root = ReactDOM.createRoot(document.getElementById("root"));
            root.render(<Reg></Reg>);
        </script>
    </body>
</html>
